<template>
  <el-container style="solid #eee ">
    <el-aside width="auto" style="border-right: 1px solid #eee">
      <!-- 组织树-->
      <reserve-user-menu
        @usersearch="usersearch"
        @onclean="onclean"
        :form="form"
        :selectdepartment="selectdepartment"
      ></reserve-user-menu>
    </el-aside>

    <el-container>
      <el-header html :style="styleObject">
        <el-col :span="19"><span>储备人才信息表</span></el-col>

        <!-- <el-col :span="5">
          <el-button-group>
            <el-button @click="openexport" type="success" icon="el-icon-download">导出
            </el-button>

            <el-button @click="$refs.reserveUserDrawer.drawersearch = true" type="primary" icon="el-icon-search">搜索
            </el-button>
          </el-button-group>
        </el-col> -->
      </el-header>

      <!-- <el-main v-if="tableData && tableData.length > 0"> -->
      <!-- 人员信息表-->
      <reserve-user-table
        :tableData="tableData"
        :currentPage="currentPage"
        :totalCount="totalCount"
        :PageSize="PageSize"
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
      >
      </reserve-user-table>
      <!-- </el-main> -->

      <!-- <el-main v-else>
        <el-row type="flex" align="middle">
          <el-col type="flex" align="middle">
            <el-empty description="暂无数据" :image-size="200"></el-empty>
          </el-col>
        </el-row>
      </el-main> -->
    </el-container>

    <!-- 抽屉 -->

    <!-- 人员信息卡-->

    <!-- 抽屉 -->
  </el-container>
</template>

  <script>
import arrayToTree from "array-to-tree";
import ReserveUserMenu from "./ReserveUserMenu.vue";
import ReserveUserTable from "./ReserveUserTable.vue";

export default {
  components: {
    ReserveUserTable,
    ReserveUserMenu,
  },

  data() {
    return {
      styleObject: {
        height: "30px",
        textAlign: "left",
        fontSize: "25px",
        color: "#F56C6C",
      },
      title: "  ",

      //导出页面所需数据
      tablename: [], //全部字段名称

      // 搜索表单数据
      form: { usertype: "", usertag: [], department: [] },

      // table所需数据
      tableData: [], // 总数据
      currentPage: 1, // 默认显示第几页
      totalCount: 1, // 总条数，根据接口获取数据长度(不能为空)
      PageSize: 7, //每页展示条数

      //组织树所需数据
      selectdepartment: [],

      syndatareport: [],
    };
  },

  created() {
    // 获得部门信息
    this.getDepartment();
  },

  methods: {
    //  同步数据

    // 打开导出抽屉，同时给子组件的checkbox赋值
    openexport() {
      if (this.tableData && this.tableData.length > 0) {
        this.$refs.reserveUserDrawer.tableTitle = this.tablename;
        this.$refs.reserveUserDrawer.tableRange = this.tablename;
        this.$refs.reserveUserDrawer.drawerexport = true;
      } else {
        this.$message.error("你看看有数据吗？你让我导出啥？");
      }
    },
    // 获得全部数据字段名称
    async getallkey() {
      this.tableid = Object.keys(this.tableData[0]);
      let datas = {
        keyname: this.tableid,
      };
      this.$axios
        .post("api/getkeymapname", datas)
        .then((response) => {
          this.tablename = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    // 查找用户
    async usersearch() {
      let datas = {
        tag: this.form.usertag,
        department: this.form.department,
      };

      this.$axios
        .post("api/reserve/tagsearch", datas)
        .then((response) => {
          this.tableData = response.data;
          this.totalCount = this.tableData.length;
          this.currentPage = 1;

          this.$notify({
            title: "获取成功",
            message: "获取用户信息成功",
            type: "success",
            duration: 1500,
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    // 清空搜索条件
    onclean() {
      this.form.department = [];
      this.form.usertag = [];
      this.form.usertype = "";
    },

    // 打开页面时加载部门信息
    async getDepartment() {
      try {
        let res = await this.$axios.get(`api/member/getdepartment`);

        this.department = arrayToTree(res.data, {
          parentProperty: "pid",
          customID: "id",
        });
        this.selectdepartment = res.data;
        console.log(this.selectdepartment);
      } catch (e) {}
    },

    // 页码跳转
    handleCurrentChange(val) {
      this.currentPage = val;
    },

    handleSizeChange(val) {
      this.PageSize = val;
    },
  },
};
</script>

  <style scoped>
.el-aside {
  height: 85vh;
}
</style>
